<template>
    <div id="maintain">
        <TopHeader />
        <div class="maintain_top_input">
            <div class="maintain_top_input_left">
                <img class="img" src="../../assets/imgx/title-bg-image.png" alt="" />
                <span>维护保养<div>INFORMATION</div></span>
            </div>
            <div class="maintain_top_input_right">
                <input type="text" v-model="searchKey" placeholder="请输入零部件名称">
                <img src="../../assets/imgx/seel.png" @click="SearChFun" alt="">
            </div>
            <div class="maintain_top_button" @click="$router.go(-1)">
                返回
            </div>
        </div>
        <div class="maintain_tbutton">
            <div class="maintaitn_tbutton_left">
                <MainLeftDev :mainObj="MainLeftObj" :asseaytid="asseaytid" v-if="this.MainLeftObj.length"
                    @rightLinkage="rightLinkage" />
            </div>

            <div class="maintaitn_tbutton_right">
                <slotcon>
                    <template v-slot:com>
                        <Mainright :MainRightObj="MainRightObj" @MainChildEmit="MainChildEmit" />
                    </template>
                </slotcon>
            </div>

        </div>
    </div>
</template>
<script>
import TopHeader from '@/components/TopHeader.vue'

import { MainLeftApi, searchWorkByName } from "@/api/mainListApi/index.js"
export default {
    components: {
        TopHeader,
        MainLeftDev: () => import("./MainLeft/index.vue"),
        Mainright: () => import("./Mainright/index.vue"),
        slotcon: () => import('@/components/SslotCom/index.vue'),
    },

    data() {
        return {
            token: "",
            username: "",
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            MainLeftObj: [],
            MainRightObj: [],
            num: 0,
            equipmentId: "",
            asseaytid: "",
            searchKey: ""
        }
    },
    created() {

    },
    mounted() {
        this.asseaytid = this.$route.params.id
        this.equipmentId = this.$store.state.Userindex.equipmentId
        this.LeftClickFun()
        this.rightLinkage(this.$route.params.id)
    },
    methods: {
        // 保养完毕重新请求接口实现刷新
        MainChildEmit() {
            this.rightLinkage(this.num)
            this.LeftClickFun()
        },
        // 搜素按钮
        SearChFun() {
            this.rightLinkage(this.num)
        },
        LeftClickFun() {
            MainLeftApi({
                equipmentId: this.equipmentId
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.MainLeftObj = res.data
                }
            })
        },
        rightLinkage(item) {
            this.num = item;
            searchWorkByName({
                searchKey: this.searchKey,
                assemblyId: this.num
            }).then(res => {
                if (res.code == 200) {
                    if (res.msg == "零部件列表为空！") {
                        this.MainRightObj = [];
                    } else {
                        this.MainRightObj = res.data;
                    }
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
input::-webkit-input-placeholder {
    font-size: 14px;
    color: #3e5f90;
}

.el-avatar {
    background: rgba(28, 114, 194, 1);
}

#maintain {
    width: 100%;
    height: 100%;

    .maintain_top {
        width: 477px;
        height: 42px;
        position: relative;

        .top_img {
            width: 1575px;
            height: 100%;

            img {
                height: 70%;
                width: 100%;
            }
        }

        .to_button {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 60px;
            text-align: center;
            color: white;
            line-height: 60px;

        }

        .top_user_title {
            position: absolute;
            left: 1400px;
            top: 2px;
            width: 102px;
            height: 40px;
            text-align: center;
            color: white;
            line-height: 40px;
        }
    }

    .maintain_top_input {
        width: 96%;
        height: 30px;
        margin: 0px 24px;
        position: relative;
        display: flex;
        position: relative;
        align-items: flex-start;

        .maintain_top_input_left {
            position: relative;
            width: 403px;
            height: 39px;

            .img {
                position: absolute;
                top: 0;
                height: 100%;
                width: 100%;
            }

            span {
                position: absolute;
                left: 63px;
                top: 5px;
                font-size: 16px;
                color: white;
                display: inline-block;


                div {
                    margin-top: 2px;
                    display: inline-block;
                    color: #1779b9;
                    font-size: 10px;
                    margin-left: 9px;

                }
            }
        }

        .maintain_top_input_right {
            width: 208px;
            height: 25px;
            background: none;
            position: relative;
            margin-top: 8px;

            input {
                color: white;
                width: 100%;
                height: 100%;
                background: none;
                border-radius: 16px 16px 16px 16px;
                border: 1px solid #02489E;
                outline: 0;
            }

            img {
                width: 31px;
                height: 31px;
                position: absolute;
                top: 1px;
                right: -10px;
                padding: 0px 5px;
            }
        }

        .maintain_top_button {
            cursor: pointer;
            background: url("../../assets/imgx/out_btn.png");
            background-repeat: no-repeat;
            line-height: 30px;
            font-size: 10px;
            text-align: center;
            color: white;
            width: 74px;
            height: 30px;
            position: absolute;
            top: 0%;
            right: -40px;

        }
    }

    .maintain_tbutton {
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;

        .maintaitn_tbutton_left {
            width: 134px;
            cursor: pointer;
            height: 100%;
            margin-left: 30px;
        }

        .maintaitn_tbutton_right {
            width: 1685px;
            height: 860px;
            margin: 10px;
            margin-left: 20px;

        }
    }
}

::-webkit-scrollbar {
    list-style: none;
}
</style>